<template>
  <div>
    <div id="app">
      <el-card style="width: 500px;margin: auto">
        <div slot="header" class="clearfix">
          <span>个人资料</span>
        </div>
        <el-form label-width="60px" size="small" :model="form" :rules="rules" ref="Form">
          <el-form-item label="用户名">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="form.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <!--    <el-form-item label="密码" v-show="showPwd" v-if="showPwd==true">-->
          <!--      <el-input v-model="form.password" autocomplete="off"></el-input>-->
          <!--    </el-form-item>-->
          <!--      <el-form-item label="照片">
                  <el-input v-model="form.photo" autocomplete="off"></el-input>
                </el-form-item>-->
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8082/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="form.photo" :src="form.photo" class="avatar" width="100px" height="100px">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="请选择">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
              <el-option label="保密" value="保密"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="email"
                        label="邮箱"
                        :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
          >
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>

</template>

<script>
export default {
  name: "UserPerson",
  data() {
    return {
      form: {},
      user: {},
      rules: {

      },
    }
  },
  created() {
    this.load()
  },
  methods:{
    load(){
      let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
      if (username) {
        this.request.post("/user/findUserByName?username=" + username).then(res => {
          if (res) {
            res.token = this.user.token
            this.form = res
            localStorage.setItem("user",JSON.stringify(res))
            console.log(res.password)
          }
        })
      }
    },
    save(){
      this.$refs['Form'].validate((valid) => {
        if (valid) { //表单校验合法
          this.request.post("/user/editUser", this.form).then(res => {
            if (res) {
              this.$message.success("保存成功")
              this.load()
              this.$emit('refreshUser')
            } else {
              this.$message.error("保存失败")
            }
          })
        }
      })
    },
    handleAvatarSuccess(res) {
      this.form.photo = res
    }
  }
}
</script>

<style scoped>
#app{
  padding-top: 20px;
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>
